import { Component, OnInit, Input } from '@angular/core';
import { HttpService } from '../../shared/service/http.service';
declare let echarts: any;
@Component({
  selector: 'app-my-achievement-chart',
  templateUrl: './my-achievement-chart.component.html',
  styleUrls: ['./my-achievement-chart.component.scss'],
})
export class MyAchievementChartComponent implements OnInit {
  @Input() tagData: any;
  allData: any = [];
  data1: any = [];
  xAxisData: any = [];
  updateOptions1: any;
  options1 = {};
  constructor(private httpService: HttpService) { }

  ngOnInit() {
    // console.log('msg----->' + JSON.stringify(this.tagData));
    // tslint:disable-next-line:max-line-length
    this.allData = this.tagData.data.data.series.data; //  [["2019-10-15", 0, 0], ["2019-10-16", 0, 0], ["2019-10-17", 0, 0], ["2019-10-18", 0, 0], ["2019-10-19", 0, 0], ["2019-10-20", 0, 0]];
    // console.log('msg----->' + JSON.stringify(this.allData));
  }

  // tslint:disable-next-line:use-life-cycle-interface
  ngAfterViewInit(): void {
    // tslint:disable-next-line:max-line-length
    this.allData = this.tagData.data.data.series.data; 
   /*  this.allData = [["10-15", 200, 0], ["10-16", 9800, 0], ["10-17", 0, 0], ["10-18", 100, 0], ["10-19", 0, 0], ["10-20", 0, 0]]; */
    const container = document.getElementById('browsingEchars');
    if (this.allData.length > 0) {
      this.options1 = {
      grid: {
        x: 20,
        y: 20,
        x2: 20,
        y2: 25,
      },
       /*  backgroundColor: 'white', */
       /*  borderRadius: "0.5rem", */
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,99,20,0.94)',
          textStyle: {
            color: 'rgba(255,255,255,1)'
          },
          formatter: (params) => {
            params = params[0];
            return params.value;
          },
          // tslint:disable-next-line:max-line-length
          extraCssText: 'box-shadow:0rem 0.13rem 0.31rem 0rem rgba(255,99,20,0.2);border-radius:1.41rem;opacity:0.94;padding-left:0.81rem;padding-right:0.81rem;',
        },
        xAxis: {
          axisLabel: {
            fontWeight: 300,
            color: 'rgba(133,136,148,1)',
            fontFamily: 'SFProText-Light',
            formatter: (value, index) => {
              const date = new Date(('1999-' + value).replace(/-/g, "/"));
              const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
              const strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
              const texts = [month, strDate];
              return texts.join('-');
            }
          },
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          axisPointer: {
            lineStyle: {
              color: 'rgba(255,99,20,0.5)',
              width: 1
            }
          },
          data: this.allData.map((item) => {
            return item[0];
          })
        },
        yAxis: {
          /* 每个网格之间相距的数值 */
         /*  interval: 1000, */
          min: 0,
          /* max: 4000, */
          splitNumber: 4, 
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(235,235,237,1)'
            }
          }, axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          }, axisLabel: {
            show:false,
            fontWeight: 300,
            color: 'rgba(133,136,148,1)',
            fontFamily: 'SFProText-Light',
          }
        },
        series: {
          // tslint:disable-next-line:no-string-literal
          name: this.tagData.data.data.title,
          type: 'line',
          smooth: true,
          symbolSize: 6,
          showSymbol: true,
          symbol: 'emptyCircle', // emptyCircle
          hoverAnimation: true,
          color: ['#FF6314'],
          itemStyle: {
            normal: {
              color: '#FF6314',
              borderColor: '#FF6314',  // 拐点边框颜色
              borderWidth: 1 // 拐点边框大小
            },
            emphasis: {
              color: '#FF6314'// hover拐点颜色定义
            }
          },
          lineStyle: {
            width: 2
          },
          data: this.allData.map((item) => {
            return item[1];
          }),
        }
      };
      const ec = echarts as any;
      const chart = ec.init(container);
      chart.setOption(this.options1);
      const previous = document.getElementById('ec_previous');
      const next = document.getElementById('ec_next');
     /*  chart.height = "100%"; */
      /* chart.canvas.parentNode.style.height = '337px'; */
      /*  chart.resize ="50px";
       container.style.height="100%";
       container.style.height="100%"; */
      chart.on('dataZoom', (params) => {
        if (params.batch[0].start <= 10 && this.tagData.data.submit.content.preMonth !== 0) { // previous month
          previous.style.display = "block";
          next.style.display = "none";
        } else if (params.batch[0].end >= 90 && this.tagData.data.submit.content.nextMonth !== 0) {
          previous.style.display = "none";
          next.style.display = "block";
        } else {
          previous.style.display = "none";
          next.style.display = "none";
        }
      });
    } else {
      container.style.display = "none";
    }
  }

  refreshData(type) {
    const that = this;
    console.log('msg-----> getPrevious ');
    let tmpData = [];
    // tslint:disable-next-line:max-line-length
    const cparams = { content: { month: type === 1 ? that.tagData.data.submit.content.preMonth : that.tagData.data.submit.content.nextMonth, opportunity_id: that.tagData.data.submit.content.opportunity_id }, id: that.tagData.data.submit.id, sessionId: localStorage.getItem('sessionId') };
    that.httpService.post('application/submit', cparams, (pres) => {
      if (pres) {
        that.tagData.data.series.data = [];
        that.tagData.data.submit.content.preMonth = pres.data.submit.content.preMonth;
        that.tagData.data.submit.content.nextMonth = pres.data.submit.content.nextMonth;
        that.tagData.data.submit.content.opportunity_id = pres.data.submit.content.opportunity_id;
        that.tagData.data.series = pres.data.series;
        tmpData = pres.data.series.data;
        const ec = echarts as any;
        const previous = document.getElementById('ec_previous');
        const next = document.getElementById('ec_next');
        const container = document.getElementById('browsingEchars');
        const chart = ec.init(container);
        if (this.tagData.data.submit.content.preMonth === 0) {
          previous.style.display = "none";
        }
        if (this.tagData.data.submit.content.nextMonth === 0) {
          next.style.display = "none";
        }
        chart.on('dataZoom', (params) => {
          if (params.batch[0].start <= 10 && this.tagData.data.submit.content.preMonth !== 0) { // previous month
            previous.style.display = "block";
            next.style.display = "none";
          } else if (params.batch[0].end >= 90 && this.tagData.data.submit.content.nextMonth !== 0) {
            previous.style.display = "none";
            next.style.display = "block";
          } else {
            previous.style.display = "none";
            next.style.display = "none";
          }
        });
        chart.setOption(
          {
            title: {
              // tslint:disable-next-line:no-string-literal
              text: this.tagData.data.data.title
            },
            tooltip: {
              trigger: 'axis',
              backgroundColor: 'rgba(255,99,20,0.94)',
              textStyle: {
                color: 'rgba(255,255,255,1)'
              },
              formatter: (params) => {
                params = params[0];
                return params.value;
              },
              // tslint:disable-next-line:max-line-length
              extraCssText: 'box-shadow:0rem 0.13rem 0.31rem 0rem rgba(255,99,20,0.2);border-radius:1.41rem;opacity:0.94;padding-left:0.81rem;padding-right:0.81rem;',
            },
            xAxis: {
              axisLabel: {
                fontWeight: 300,
                color: 'rgba(133,136,148,1)',
                fontFamily: 'SFProText-Light',
                formatter: (value, index) => {
                  const date = new Date(('1999-' + value).replace(/-/g, "/"));
                  const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                  const strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                  const texts = [month, strDate];
                  return texts.join('-');
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'transparent'
                }
              },
              axisPointer: {
                lineStyle: {
                  color: 'rgba(255,99,20,0.5)',
                  width: 1
                }
              },
              data: tmpData.map((item) => {
                return item[0]; //  10-22 NaN + '';
              })
            },
            yAxis: {
              interval: 1500,
              min: 0,
              max: 6000,
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(235,235,237,1)'
                }
              }, axisLine: {
                lineStyle: {
                  color: 'transparent'
                }
              }, axisLabel: {
                fontWeight: 300,
                color: 'rgba(133,136,148,1)',
                fontFamily: 'SFProText-Light',
              }
            },
            series: {
              // tslint:disable-next-line:no-string-literal
              name: this.tagData.data.data.title,
              type: 'line',
              smooth: true,
              symbolSize: 6,
              showSymbol: true,
              symbol: 'emptyCircle', // emptyCircle
              hoverAnimation: true,
              color: ['#FF6314'],
              itemStyle: {
                normal: {
                  color: '#FF6314',
                  borderColor: '#FF6314',  // 拐点边框颜色
                  borderWidth: 1 // 拐点边框大小
                },
                emphasis: {
                  color: '#FF6314'// hover拐点颜色定义
                }
              }, lineStyle: {
                width: 2
              },
              data: tmpData.map((item) => {
                return item[1];
              }),
            }
          }
        );
      }
    });
  }
}